<template>
	<view>
		<view class="order" style="position: relative;">

			<view style="width: 100%;background: #fff;z-index: 999;">
				<u-tabs :list="list" :is-scroll="false" active-color="#FF7F00" inactive-color=" #666666" :bold="bold"
					:current="current" @change="change"></u-tabs>
			</view>

			<!-- 全部 -->
			<view class="tabs_box" v-if="current != 2 && current != 3">
				<view class="order_box" v-for="(item,index) in lists" :key="index">
					<checkbox-group class="block" @change="CheckboxChange(index)">
						<view class="order_success" v-if="item.status=='0' || item.status=='3'">
							<view class="order_name">待接单</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='1'">
							<view class="order_name">待出库</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='2'">
							<view class="order_name">正在配送中</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='4'">
							<view class="order_name">已完成</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<u-line color="#E6E6E6" />
						<view class="order_city" @click="bindorderDetail(item)">
							<view class="city_address">
								<view class="fh_box">
									<view class="fh_image">
										<image src="../../../static/image/icon_f.png"></image>
									</view>
									<view class="box">
										<view class="fh_name">
											{{item.pickUpAddressName }}
										</view>
										<view class="sh_type">
											{{item.shipper}}
											<text>{{item.shipperPhone}}</text>
										</view>
									</view>
								</view>
								<view class="sh_box">
									<view class="sh_image">
										<image src="../../../static/image/icon_d.png"></image>
									</view>
									<view class="box">
										<view class="sh_name">
											{{item.deliveredAddressName}}
										</view>
										<view class="sh_type">{{item.receiver}}
											<text>{{item.receiverPhone}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="city_type">
							<view class="type_name text-bold">
								订单号：{{item.orderNumber}}
							</view>
						</view>

						<view>
							<u-line color="#E6E6E6" />
						</view>
						<view class="order_btn">

							<div style="width: 50%;">
								<checkbox :class="item.checked?'checked':''" :checked="item.checked?true:false"
									:value="item.id" style="margin-left: 20rpx;" v-if="item.status == 0"></checkbox>
								<div v-if="item.status == 1">
									<div v-if="item.pickupCode">取件码：{{item.pickupCode}}</div>
								</div>
							</div>

							<view class="btn2" v-if="current!=4 && (item.status == 0 || item.status == 3)"
								@click.stop="jiedan(item.id)">接单
							</view>

							<view class="btn2" v-if="current!=4 && item.status == 1" @click.stop="chuku(item)">出库
							</view>

							<view :class="ifZhuans(item)?'btn2':'btn3'" v-if="current!=4 && item.status == 2"
								@click.stop="ifZhuan(item.id)">
								{{ifZhuans(item)?'完成':'转单'}}
							</view>

						</view>
					</checkbox-group>
					<view class="tabbar" v-if="current == 0 && current!=4">
						<view class="paytut">
							<view style="padding: 20upx;">
								<checkbox-group class="checked" @change="Quanxuan">
									<checkbox value="1" :checked="quanxuans"></checkbox>
									<text style="margin-left: 10upx;">全选</text>
								</checkbox-group>
							</view>
							<view style="width: 35%;background-color: #FF7F00;height: 100upx;"
								class="flex justify-center align-center" @click.stop="jiedan()">接单</view>
						</view>
					</view>
				</view>
			</view>




			<!-- 全部 -->
			<view class="tabs_box" v-if="current == 2">
				<view class="order_box" v-for="(it,inx) in groupedArray" :key="inx">
					<view class="order_success">
						<view class="order_name" style="font-size: 33rpx;flex: 3;flex-wrap: wrap;">
							{{Object.keys(it)}}
						</view>
						<view class="order_data">订单数量：{{Object.entries(it)[0][1].length}}</view>
					</view>

					<u-line color="#E6E6E6" />

					<view class="order_box" v-for="(item,index) in Object.entries(it)[0][1]" :key="index">
						<view class="order_success" v-if="item.status=='0'">
							<view class="order_name">待接单</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='1'">
							<view class="order_name">待出库</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='2'">
							<view class="order_name">正在配送中</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='3'">
							<view class="order_name">正在前往中转站</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<view class="order_success" v-if="item.status=='4'">
							<view class="order_name">已完成</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<u-line color="#E6E6E6" />
						<view class="order_city" @click="bindorderDetail(item)">
							<view class="city_address">
								<view class="fh_box">
									<view class="fh_image">
										<image src="../../../static/image/icon_f.png"></image>
									</view>
									<view class="box">
										<view class="fh_name">
											{{ item.pickUpAddressName }}
										</view>
										<view class="sh_type">{{item.shipper}}
											<text>{{item.shipperPhone}}</text>
										</view>
									</view>
								</view>
								<view class="sh_box">
									<view class="sh_image">
										<image src="../../../static/image/icon_d.png"></image>
									</view>
									<view class="box">
										<view class="sh_name">
											{{item.deliveredAddressName}}
										</view>
										<view class="sh_type">{{item.receiver}}
											<text>{{item.receiverPhone}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="city_type">
							<view class="type_name text-bold">
								订单号：{{item.orderNumber}}
							</view>
						</view>

						<view>
							<u-line color="#E6E6E6" />
						</view>

						<view class="order_btn">
							<div style="width: 50%;">
								<checkbox :class="item.checked?'checked':''" :checked="item.checked?true:false"
									:value="item.id" style="margin-left: 20rpx;"
									v-if="item.status == 0 ||  item.status == 3"></checkbox>
								<div v-if="item.status == 1">
									<div v-if="item.pickupCode">取件码：{{item.pickupCode}}</div>
								</div>
							</div>

							<view class="btn2" v-if="current!=4 && (item.status == 0 || item.status == 3)"
								@click.stop="jiedan(item.id)">接单
							</view>
							<view class="btn2" v-if="current!=4 && item.status == 1" @click.stop="chuku(item)">出库
							</view>
							<view :class="ifZhuans(item)?'btn2':'btn3'" v-if="current!=4 && item.status == 2"
								@click.stop="ifZhuan(item.id)">
								{{ifZhuans(item)?'完成':'转单'}}
							</view>
						</view>



					</view>

				</view>
			</view>
			<!-- 全部 -->
			<view class="tabs_box" v-if="current == 3 ">
				<view class="order_box" v-for="(item,index) in lists" :key="index">
					<checkbox-group class="block">
						<view class="order_success" v-if="item.status=='0' || item.status=='3'">
							<view class="order_name">待接单</view>
							<view class="order_data">{{item.createTime}}</view>
						</view>
						<u-line color="#E6E6E6" />
						<view class="order_city" @click="bindorderDetail(item)">
							<view class="city_address">
								<view class="fh_box">
									<view class="fh_image">
										<image src="../../../static/image/icon_f.png"></image>
									</view>
									<view class="box">
										<view class="fh_name">
											{{item.pickUpAddressName }}
										</view>
										<view class="sh_type">{{item.shipper}}
											<text>{{item.shipperPhone}}</text>
										</view>
									</view>
								</view>
								<view class="sh_box">
									<view class="sh_image">
										<image src="../../../static/image/icon_d.png"></image>
									</view>
									<view class="box">
										<view class="sh_name">
											{{item.deliveredAddressName}}
										</view>
										<view class="sh_type">{{item.receiver}}
											<text>{{item.receiverPhone}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<view class="city_type">
							<view class="type_name text-bold">
								订单号：{{item.orderNumber}}
							</view>
						</view>

						<view>
							<u-line color="#E6E6E6" />
						</view>
					</checkbox-group>
				</view>
			</view>





			<view style="height: 180upx;" v-if="status == 0"></view>
			<view style="height: 50upx;" v-else></view>
			<empty v-if="lists.length == 0"></empty>
			<!-- 取货码弹框 -->
			<u-popup v-model="shows" mode="center" border-radius="18" width="580rpx" height="400rpx">
				<view class="receipt_code">
					<view class="code_title">填写取货码</view>
					<u-input v-model="shouhuoma" type="text" placeholder="请输入取货码" :border="true" />
					<view class="sure" @click="querenSh">确定</view>
				</view>
			</u-popup>


		</view>

	</view>
</template>

<script>
	import empty from '@/components/empty'
	import configdata from '@/common/config.js'
	export default {
		components: {
			empty
		},

		props: {
			riderLineList: {
				type: Object,
				required: true
			},
		},


		data() {
			return {
				quanxuans: false,
				shows: false,
				closeable: true,
				shouhuoma: '',
				shouhuoma1: '',
				list: [{
						name: '待接单'
					},
					{
						name: '待出库'
					},
					{
						name: '配送中'
					},
					{
						name: '中转中'
					},
					{
						name: '已完成'
					}
				],
				current: 0,
				bold: false,
				page: 1,
				limit: 10,
				order: [],
				lists: [],
				totalCount: 0,
				longitude: '', //经度
				latitude: '', //纬度
				indentNumber: '', //订单号
				status: 0,
				LogisticsOrderId: '', //订单id
				map_key: configdata.MapKey,
				groupedArray: [],
				checkboxList: [],
			}
		},
		onShow() {
			var that = this
			uni.showLoading({
				title: '加载中...',
				mask: true // 是否显示遮罩层（防止触摸穿透）
			});
			that.taskData()
			uni.hideLoading();
		},


		methods: {

			
			change(index) {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});
				this.current = index;
				this.lists = []
				this.page = 1
				if (index == 0) {
					this.status = 0
					this.limit = 10
				}
				if (index == 1) {
					this.status = 1
					this.limit = 10
				}
				if (index == 2) {
					this.status = 2
					this.limit = 300
				}
				if (index == 3) {
					this.status = 3
					this.limit = 10
				}
				if (index == 4) {
					this.status = 4
					this.limit = 10
				}
				this.$emit('child-event');
				this.taskData()
				uni.hideLoading();
			},





			//配送时根据订单目的地划分
			computDest(arry) {
				if (arry.length > 0) {
					const groupedArray = arry.reduce((acc, curr) => {
						const key = curr.receiverAddressArea; // 分组的键（如 'a', 'b', 'c'）
						// 查找累加器中是否已有该键对应的分组
						const existingGroup = acc.find(group => group[key] !== undefined);

						if (existingGroup) {
							// 分组存在，将当前元素添加到对应数组
							existingGroup[key].push(curr);
						} else {
							// 分组不存在，创建新分组并添加到累加器
							acc.push({
								[key]: [curr]
							});
						}
						return acc;
					}, []); // 初始累加器为空数组
					this.groupedArray = groupedArray
				} else {
					this.groupedArray = []
				}
			},



			//多选
			CheckboxChange(e) {

				this.lists[e].checked = !this.lists[e].checked


				this.quanxuans = this.lists.every(it => it.checked == true)
			},


			//全选
			Quanxuan() {

				this.quanxuans = !this.quanxuans

				this.lists.forEach(it => {
					it.checked = this.quanxuans
				})
			},

			// 订单获取
			taskData() {
				this.$Request.getT('/app/logisticsOrder/queryOrders', {
					page: this.page,
					limit: this.limit,
					status: this.status,
				}).then(res => {
					
					if (res.code == 0 && res.data.list.length > 0) {
						let dataArry = res.data.list.map(it => {
							it['checked'] = false
							return it
						})
						if (this.page == 1) {
							this.lists = dataArry
						} else {
							this.lists = this.lists.concat(dataArry)
						}
						if (this.current == 2) {
							this.computDest(this.lists)
						}
						this.totalCount = res.data.totalPage

						uni.stopPullDownRefresh();
					} else {
						this.lists = res.data.list
						this.computDest(this.lists)

					}

					uni.hideLoading(); // 隐藏加载提示
				}).catch(error => {
					console.log(error);
				});
			},



			//接单
			jiedan(id) {
				let dataArry = []
				if (id) {
					dataArry.push(id)
				} else {
					this.lists.forEach(it => {
						if (it.checked) {
							dataArry.push(it.id)
						}
					})
				}
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});

				if (dataArry.length == 0) {
					uni.showToast({
						title: '请选择订单',
						icon: "none"
					});
					return
				}

				this.$Request.postT('/app/logisticsOrder/jieLogisticsOrder', {
					LogisticsOrderIds: [...dataArry]
				}).then(res => {
					if (res.code == 0) {
						this.page = 1
						this.taskData()
						uni.showToast({
							title: '接单完成',
							icon: "success"
						});
						this.$emit('child-event');
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
				uni.hideLoading();
			},



			chuku(e) {
				this.LogisticsOrderId = e.id
				this.querenSh()
			},


			// 订单详情
			bindorderDetail(item) {
				uni.navigateTo({
					url: '/pages/riderMy/cityLogistics/orderDetail?orderNumber=' + item.orderNumber + '&areaCode=' + this.riderLineList.areaCode
				})
			},




			//判断是否转单
			ifZhuan(id) {

				const data = this.lists.find(it => it.id == id)
				if (this.riderLineList.area == data.receiverAddressArea) {
					this.wancheng(id)
				} else {
					let wayPoints = data.wayPoints
					let deliteLog = wayPoints.findIndex(it => it.wayPointAreaCode == this.riderLineList.areaCode)
					let pointData = {}
					if (wayPoints.length > 0 && deliteLog < 0) {
						pointData = wayPoints[0]
					} else {
						pointData = wayPoints[deliteLog + 1]
					}
					this.$Request.postT('/app/logisticsOrder/saveZhuanOrder', {
						logisticsOrderId: data.id,
						transferPointId: pointData.pointId
					}).then(res => {
						if (res.code == 0) {
							this.page = 1
							this.taskData()
							uni.showToast({
								title: '转单完成',
								icon: "success",
								duration: 2000,
							});
							this.$emit('child-event');
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none"
							});
						}
					});
				}
			},


			//判断是否转单
			ifZhuans(data) {
				let deliveredAddressName = data.deliveredAddressName
				let receiverExpressCabinetName = data.receiverExpressCabinetName
				if(deliveredAddressName == receiverExpressCabinetName){
					return true
				}else{
					false
				}
			},


			//出库确认（填写确认码后）
			querenSh() {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});
				this.$Request.postT('/app/logisticsOrder/quOrder', {
					LogisticsOrderId: this.LogisticsOrderId,
					pickupCode: this.shouhuoma
				}).then(res => {
					if (res.code == 0) {
						this.taskData()
						uni.showToast({
							title: '取货完成',
							icon: "none"
						});
						this.$emit('child-event');
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
				uni.hideLoading();
			},



			//完成确认（填写确认码后）
			wancheng(id) {
				uni.showLoading({
					title: '加载中...',
					mask: true // 是否显示遮罩层（防止触摸穿透）
				});
				this.$Request.postT('/app/logisticsOrder/finishOrder', {
					logisticsOrderId: id,
				}).then(res => {
					if (res.code == 0) {
						this.taskData()
						uni.showToast({
							title: '已完成',
							icon: "success"
						});
						this.$emit('child-event');
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none"
						});
					}
				});
				uni.hideLoading();
			}

		},
		onReachBottom: function() {
			if (this.page < this.totalCount) {
				this.page += 1;
				this.taskData();
			}
		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.taskData();
		},

	}
</script>

<style>
	body {
		background: #F5F5F5;
	}

	.tabs_box {
		/* display: none; */
		/* margin-top: 90rpx; */
	}

	.dis {
		/* display: block; */
		width: 100%;
	}

	.u-tab-item {
		font-size: 26upx !important;
		/* color: #666666 !important; */
	}

	.success_box {
		width: 100%;
	}

	.order_box {
		width: 90%;
		margin: 0 auto;
		/* height: 390rpx; */
		background: #FFFFFF;
		margin-top: 20rpx;
		border-radius: 16px;
		padding-bottom: 16rpx;
	}

	.order_success {
		width: 90%;
		margin: 0 auto;
		display: flex;
		min-height: 80upx;
	}

	.order_name {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		font-weight: bold;
		font-size: 26rpx;
		letter-spacing: 1upx;
	}

	.order_data {
		flex: 1;
		color: #999999;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		font-size: 24rpx;
	}

	.city_type {
		width: 90%;
		margin: 0 auto;
		height: 60upx;
		line-height: 60upx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.type_name {
		font-size: 27rpx;
	}

	.city_text {
		width: 70rpx;
		line-height: 36rpx;
		color: #49A5FF;
		background: #c4e2ff;
		text-align: center;
		font-size: 19rpx;
		margin-left: 20rpx;
	}

	.city_address {
		width: 85%;
		margin: 0 auto;
		margin-top: -10rpx;
	}

	/* 发货地址 */
	.fh_box {
		display: flex;
		/* height: 80upx; */
		margin-top: 20upx;
	}

	.fh_image {
		flex: 1;
	}

	.box {
		flex: 11;
	}

	.fh_name {
		font-size: 26rpx;
		font-weight: 600;
		letter-spacing: 2upx;
	}

	.fh_type {
		color: #999999;
		font-size: 22upx;
	}

	.fh_type text {
		margin-left: 20upx;
	}

	/* 送货地址 */
	.sh_box {
		display: flex;
		margin-bottom: 14upx;
		margin-top: 14rpx;
	}

	.sh_image {
		flex: 1;
	}

	.sh_name {
		font-size: 26rpx;
		font-weight: 600;
		letter-spacing: 2upx;
	}

	.sh_type {
		color: #999999;
		font-size: 22upx;
	}

	.sh_type text {
		margin-left: 20upx;
	}

	.fh_image image {
		width: 30upx;
		height: 30upx;
	}

	.sh_image image {
		width: 30upx;
		height: 30upx;
	}

	.order_btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* height: 80upx; */
		margin-top: 8upx;
	}

	.btn1 {
		width: 170upx;
		font-size: 22upx;
		line-height: 60upx;
		text-align: center;
		border: 1upx solid #9C9C9C;
		border-radius: 20upx;
		color: #9C9C9C;
		margin-right: 30upx;
	}

	.btn2 {
		width: 170upx;
		line-height: 60upx;
		color: white;
		background: #FF6A04;
		font-size: 22upx;
		text-align: center;
		margin-right: 30upx;
		border-radius: 20upx;
	}

	.btn3 {
		width: 170upx;
		line-height: 60upx;
		color: white;
		background: #55aaff;
		font-size: 22upx;
		text-align: center;
		margin-right: 30upx;
		border-radius: 20upx;
	}

	/* 收货码弹框 */
	.receipt_code {
		width: 90%;
		margin: 0 auto;
	}

	.code_title {
		width: 100%;
		line-height: 100rpx;
		font-size: 31rpx;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2rpx;
		margin-top: 21rpx;
		margin-bottom: 25rpx;
	}

	.u-input--border {
		border: 1px solid #F2F2F2 !important;
		background: #F2F2F2 !important;
		color: #999999 !important;
		font-weight: 500 !important;
		letter-spacing: 2rpx !important;
	}

	.u-input__input {
		font-size: 30rpx;
		font-weight: bold;
		flex: 1;
		color: #999999 !important;
		min-height: 85rpx !important;
		margin-top: 7rpx;
	}

	.sure {
		width: 100%;
		height: 80rpx;
		background: #FF7F00;
		color: white;
		border-radius: 46rpx;
		text-align: center;
		line-height: 80rpx;
		margin-top: 30rpx;
		letter-spacing: 2rpx;
	}

	.tabbar {
		width: 100%;
		background: #ffffff;
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		/* #ifndef MP-WEIXIN */
		position: fixed;
		bottom: 0upx;
		left: 0upx;
		right: 0upx;
		/* #endif */
		z-index: 99;
	}

	.paytut {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #000000;
		color: #fff;
		margin: 30upx;
		border-radius: 55upx;
		overflow: hidden;
	}
</style>